<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类型模板管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/plugins/select2/select2.css"/>
    <link rel="stylesheet" href="/plugins/select2/select2-bootstrap.css"/>
    <script src="/plugins/select2/select2.min.js" type="text/javascript"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">商品类型模板管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" onclick="deleteCheck()"><i
                            class="fa fa-trash-o"></i> 删除
                    </button>

                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
                分类模板名称：<input>
                <button class="btn btn-default" name="name" id="Tempname" onclick="getAll()" >查询</button>
            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">模板ID</th>
                <th class="sorting">分类模板名称</th>
                <th class="sorting">关联规格</th>
                <th class="sorting">关联品牌</th>
                <th class="sorting">扩展属性</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="typeTemp">
            </tbody>
        </table>
        <!--数据列表/-->

    </div>
    <!-- 数据表格 /-->
    <form id="page">
        <a href="javascript:toPage(1)">首页</a>
        <a href="javascript:toPage(2)">上一页</a>
        第<input type="text" id="pageNum" size="1px" readonly="readonly">页/
        共<input type="text" id="pages" size="1px" readonly="readonly">页/
        共<input type="text" id="total" size="1px" readonly="readonly">条
        <a href="javascript:toPage(3)">下一页</a>
        <a href="javascript:toPage(4)">末页</a>
    </form>

</div>
<!-- /.box-body -->


<!-- 增加窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">商品类型模板编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>商品类型</td>
                        <td><input class="form-control" name="name" id="name" placeholder="商品类型"></td>
                    </tr>
                    <tr>
                        <td>关联品牌</td>
                        <td>
                            <select id="brands" style="width: 100%" multiple></select>
                        </td>
                    </tr>
                    <tr>
                        <td>关联规格</td>
                        <td>
                            <select id="specs" style="width: 100%" multiple></select>
                        </td>
                    </tr>

                    <tr>
                        <td>扩展属性</td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default" title="新增扩展属性" onclick="insertinput()"><i
                                        class="fa fa-file-o"></i> 新增扩展属性
                                </button>

                            </div>
                            <table class="table table-bordered table-striped" width="800px">
                                <thead>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td>属性名称</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody id="up">
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td><input class="form-control" placeholder="属性名称"></td>
                                    <td>
                                        <button type="button" class="btn btn-default" title="删除"
                                                onclick="delinput(this)"><i
                                                class="fa fa-trash-o"></i> 删除
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        </td>
                    </tr>

                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="add()">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑窗口 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="updateLabel">商品类型模板编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>商品id</td>
                        <td><input id="UpId" class="form-control" placeholder="商品id"></td>
                    </tr>
                    <tr>
                        <td>商品类型</td>
                        <td><input id="splxUP" class="form-control" placeholder="商品类型"></td>
                    </tr>
                    <tr>
                        <td>关联品牌</td>
                        <td id="brandUP">

                        </td>
                    </tr>
                    <tr>
                        <td>关联规格</td>
                        <td id="specificationUP">

                        </td>
                    </tr>

                    <tr>
                        <td>扩展属性</td>
                        <td>
                            <div class="btn-group">
                                <button type="button" onclick="insertinput1()" class="btn btn-default" title="新增扩展属性"><i
                                        class="fa fa-file-o"></i> 新增扩展属性
                                </button>
                            </div>
                            <table id="tableUP" class="table table-bordered table-striped" width="800px">
                                <thead>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td>属性名称</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody id="UPtb">

                                </tbody>
                            </table>

                        </td>
                    </tr>

                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateUP()">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script>
    $(function () {
        getAll();
        brandListUP();
        listSpecificationUP();
    })

    function getAll(num) {
        $.ajax({
            url: '/temp/getAll',
            dataType: 'json',
            data: {pageNum: num,name:$("#Tempname").val()},
            async: false,
            type: 'get',
            success: function (result) {
                if (result.code == '666') {
                    var data = result.data.rows;
                    var html = '';
                    $(data).each(function (i, e) {
                        //关联品牌
                        var specIds = e.specIds;
                        var specList = JSON.parse(specIds);
                        var texts = [];
                        $(specList).each(function (i, e) {
                            texts.push(e.text)
                        })

                        //关联规格
                        var brandIds = e.brandIds;
                        var brandList = JSON.parse(brandIds)
                        var btext = [];
                        $(brandList).each(function (i, e) {
                            btext.push(e.text)
                        })

                        //拓展属性
                        var customAttributeItems = e.customAttributeItems;
                        var clist = JSON.parse(customAttributeItems);
                        var ctext = [];
                        $(clist).each(function (i, e) {
                            ctext.push(e.text)
                        })

                        html += '<tr>'
                        html += '<td><input type="checkbox" value="' + e.id + '"></td>'
                        html += '<td>' + e.id + '</td>'
                        html += '<td>' + e.name + '</td>'
                        html += '<td>' + texts + '</td>'
                        html += '<td>' + btext + '</td>'
                        html += '<td>' + ctext + '</td>'
                        html += '<td className="text-center">'
                        html += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toUpdate(' + e.id + ')">修改</button>'
                        html += '</td>'
                        html += '</tr>'
                    });
                    $("#typeTemp").html(html);
                    //分页
                    $("#pageNum").val(result.data.pageNum)
                    $("#pages").val(result.data.pages)
                    $("#total").val(result.data.total)
                }
            }
        })
    }


    //分页
    function toPage(id) {
        var num = parseInt($("#pageNum").val())
        var pages = parseInt($("#pages").val())
        var p = num;
        if (id == 1) {
            if (num <= 1) {
                alert("已经是首页");
                return;
            }
            p = 1;
            $("#pageNum").val(1);
        }
        if (id == 2) {
            if (num == 1) {
                alert("已经是首页")
                return;
            }
            p = num - 1;
            $("#pageNum").val(num - 1);
        }
        if (id == 3) {
            if (num == pages) {
                alert("已经是尾页")
                return;
            }
            p = num + 1;
            $("#pageNum").val(num + 1);
        }
        if (id == 4) {
            if (num == pages) {
                alert("已经是尾页")
                return;
            }
            p = pages
            $("#pageNum").val(pages);
        }
        getAll(p);
    }


    //品牌的list
    $.ajax({
        url: "/brand/getSelect",
        type: "POST",
        dataType: "json",
        data: {},
        async: false,
        success: function (result) {
            if (result.code == "666") {
                console.log(result);
                var data = result.data;
                var html = '';
                $(data).each(function (i, e) {
                    html += '<option value="' + e.id + '">' + e.name + '</option>'
                    $("#brands").html(html);
                    $("#brands").select2();
                })
            }
        }
    })
    //规格的List
    $.ajax({
        url: "/spec/getSelect",
        type: "POST",
        dataType: "json",
        data: {},
        async: false,
        success: function (result) {
            if (result.code == "666") {
                var data = result.data;
                var html = '';
                $(data).each(function (i, e) {
                    html += '<option value="' + e.id + '">' + e.specName + '</option>'
                    $("#specs").html(html);
                    $("#specs").select2();
                })
            }

        }
    })

    //增加
    function add() {
        //获取到select2选中下拉框的值
        var brandList = $("#brands").select2('data');
        var specList = $("#specs").select2('data');
        var brandarr = [];
        var specarr = [];
        $(specList).each(function (i, e) {
            var spec = {id: e.id, text: e.text};
            specarr.push(spec);
        })
        $(brandList).each(function (i, e) {
            var brand = {id: e.id, text: e.text};
            brandarr.push(brand);
        })

        var trs = $("#up").find('tr');
        var arr = [];
        $(trs).each(function (i, e) {
            var tds = $(e).find('td');
            var TbSpecificationOption = {text: $(tds[1]).find('input').val()}
            arr.push(TbSpecificationOption)
        })
        var s = JSON.stringify(specarr);
        var b = JSON.stringify(brandarr);
        var c = JSON.stringify(arr);

        $.ajax({
            url: "/temp/insert",
            type: "POST",
            dataType: "json",
            data: {name: $("#name").val(), specIds: s, brandIds: b, customAttributeItems: c},
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert(data.message)
                }
            },
            error: function (data) {
                alert("系统报错!!!")
            }
        })
    }

    //增加里面添加input框
    function insertinput() {
        var html = '';
        html += '<tr>\n' +
            '<td><input type="checkbox" class="icheckbox_square-blue" ></td>' +
            '<td><input class="form-control" placeholder="属性名称" ></td>' +
            '<td><button type="button" onclick="delinput(this)" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>' +
            '</tr>'
        $("#up").append(html);
    }

    //添加里面删除
    function delinput(is) {
        var tr = is.parentNode.parentNode; //parentNode :获取父节点
        tr.parentNode.removeChild(tr);		//removeChild :删除子节点tr
    }

    //批量删除
    function deleteCheck() {
        if (confirm("是否删除")) {
            var ids = []
            $("[type=checkbox]").each(function (i, e) {
                if ($(e).prop("checked")) {
                    ids.push($(e).val())
                }
            })
            if (ids.length <= 0) {
                alert("请选择要删除的数据")
                return
            }
            $.ajax({
                url: "/temp/deleteCheck?ids=" + ids,
                type: "get",
                dataType: "json",
                async: false,
                success: function (result) {
                    if (result.code == "666") {
                        alert(result.message)
                        getAll();
                    } else {
                        alert(result.message)
                    }
                },
                error: function () {
                    alert("异常")
                }
            })
        }
    }

    /*
    * //修改回显
    **/
    //品牌的list
    function brandListUP() {
        $.ajax({
            url: "/brand/getSelect",
            type: "post",
            data: {},
            dataType: "json",
            async: false,
            success: function (result) {
                if (result.code = "666") {
                    var brandList = result.data;
                    var html = '<select id="brandSelectUP" style="width: 100%" multiple>';
                    $(brandList).each(function (i, e) {
                        html += '<option value="' + e.id + '">' + e.name + '</option>';
                    })
                    html += '</select>';
                    $("#brandUP").html(html);
                    $("#brandSelectUP").select2();
                    console.log(brandList);
                }
            }, error: function () {
                alert("网络异常");
            }
        })
    }

    //规格的List
    function listSpecificationUP() {
        $.ajax({
            url: "/spec/getSelect",
            type: "post",
            data: {},
            dataType: "json",
            async: false,
            success: function (result) {
                if (result.code = "666") {
                    var specificationList = result.data;
                    var html = '<select id="specificationSelectUP" style="width: 100%" multiple>';
                    $(specificationList).each(function (i, e) {
                        html += '<option value="' + e.id + '">' + e.specName + '</option>';
                    })
                    html += '</select>';
                    $("#specificationUP").html(html);
                    $("#specificationSelectUP").select2();
                    console.log(brandList);
                }
            }, error: function () {
                alert("网络异常");
            }
        })
    }

    //回显
    function toUpdate(id) {
        $.ajax({
            url: "/temp/getById",
            type: "post",
            data: {id: id},
            dataType: "json",
            async: false,
            success: function (result) {
                if (result.code == "666") {
                    var brandListUP = JSON.parse(result.data.brandIds);
                    var specificationListUP = JSON.parse(result.data.specIds);
                    var ids = [];
                    var ids0 = [];
                    var html = '';
                    $(brandListUP).each(function (i, e) {
                        ids.push(e.id);
                    })
                    $(specificationListUP).each(function (i, e) {
                        ids0.push(e.id);
                    })
                    console.log(111);
                    console.log(result);
                    $("#brandSelectUP").val(ids).trigger('change');
                    $("#specificationSelectUP").val(ids0).trigger('change');
                    $("#splxUP").val(result.data.name);
                    $("#UpId").val(result.data.id);

                    var custm = JSON.parse(result.data.customAttributeItems);
                    $(custm).each(function (i, e) {
                        html += '<tr id="cloUP">';
                        html += '<td><input type="checkbox" class="icheckbox_square-blue"></td>';
                        html += '<td><input class="form-control" name="sxUP" placeholder="属性名称" value="' + e.text + '"></td>';
                        html += '<td>';
                        html += '<button type="button" class="btn btn-default" title="删除"onclick="delinput(this)"><i class="fa fa-trash-o"></i> 删除';
                        html += '</button>';
                        html += '</td>';
                        html += '</tr>';
                    })
                    $("#UPtb").html(html);
                }
            }, error: function () {
                alert("网络异常");
            }
        })
    }
    //回显里面添加input框
    function insertinput1() {
        var html = '';
        html += '<tr>\n' +
            '<td><input type="checkbox" class="icheckbox_square-blue" ></td>' +
            '<td><input class="form-control" placeholder="属性名称" ></td>' +
            '<td><button type="button" onclick="delinput(this)" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>' +
            '</tr>'
        $("#UPtb").append(html);
    }

    /*
    * 回显后的更新
    * */
    function updateUP() {
        var brandList = $("#brandSelectUP").select2('data');
        var specificationList = $("#specificationSelectUP").select2('data');
        console.log(brandList);
        // console.log(specificationList);
        var brandArr = [];
        var specificationArr = [];
        /*要把属性掏出来*/
        $(brandList).each(function (i, e) {
            /*要把属性掏出来*/
            var brand = {id: e.id, text: e.text};
            brandArr.push(brand);
        })
        $(specificationList).each(function (i, e) {
            /*要把属性掏出来*/
            var specification = {id: e.id, text: e.text};
            specificationArr.push(specification);
        })
        var brandJson = JSON.stringify(brandArr);
        console.log(brandJson);
        var specificationJson = JSON.stringify(specificationArr);
        console.log(specificationJson);

        var shuxingArr = [];
        var shuxing = document.getElementsByName("sxUP");
        console.log(0);
        console.log(shuxing[0].value);
        for (var i = 0; i < shuxing.length; i++) {
            var shuxing0 = {text: shuxing[i].value};
            shuxingArr.push(shuxing0);
        }
        var shuxingJson = JSON.stringify(shuxingArr);
        console.log(shuxingJson);
        /*
        * 增加ajax
        * */
        $.ajax({
            url: "/temp/update",
            type: "post",
            data: {
                id: $("#UpId").val(),
                name: $("#splxUP").val(),
                specIds: specificationJson,
                brandIds: brandJson,
                customAttributeItems: shuxingJson
            },
            dataType: "json",
            async: false,
            success: function (result) {
                if (result.code == "666") {
                    alert(result.message);
                    window.location.reload();
                }else {
                    alert(result.message);
                }
            }, error: function () {
                alert("网络异常");
            }
        })
    }


</script>
